<script setup lang="ts">
import { ref, computed, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useSound } from '@vueuse/sound'
import correctAnswerSfx from '@/assets/sound/correct_answer.mp3'

const intro = useIntro({
  steps: [
    {
      element: '#img-wrapper',
      intro: '请点击添加素材',
    },
    {
      element: '#add',
      intro: '请点击添加',
      position: 'top',
    },
  ],
}, [
  {
    target: 'img-wrapper',
    posotionCallback(info: DOMRect) {
      return { x: info.left + 100, y: info.top + 80 }
    },
  },
  {
    target: 'add',
    isReverse: true,
    posotionCallback(info: DOMRect) {
      return { x: info.left - 30, y: info.top - 15 }
    },
  },
])
const appStore = useAppStore()

const set1 = setTimeout(() => {
  intro.stop()
  intro.start()
}, 500);
onBeforeUnmount(() => {
  intro.stop()
  clearTimeout(set1)
})
onUnmounted(() => {
  intro.stop()
  clearTimeout(set1)
})
const imgList = ref([
  {
    id: 1,
    path: new URL('@/assets/common/12/thumb_1.jpg', import.meta.url).href,
    isSelected: false,
    selectedOrder: 0,
  },
  {
    id: 2,
    path: new URL('@/assets/common/12/thumb_2.jpg', import.meta.url).href,
    isSelected: false,
    selectedOrder: 0,
  },
])

const selectedTotal = computed(() => {
  return imgList.value.filter(img => img.isSelected).length
})
const selectedList = computed(() => {
  return imgList.value.filter(img => img.isSelected)
})

let clickCount = 0;

function handleSelect() {
  clickCount += 1;

  const unselectedImages = imgList.value.filter(img => !img.isSelected);
  const targetImage = unselectedImages[0];

  if (targetImage) {
    targetImage.isSelected = true;
    targetImage.selectedOrder = selectedTotal.value ;

    if (clickCount % 2 === 0) {
      play();
      intro.intro.goToStep(2);
    }
  }
}

const { play } = useSound(correctAnswerSfx)
const router = useRouter()
function handleAdd() {
  play()
  router.push('/11/Mask1_1')
  intro.stop()
}
</script>

<template>
  <div class="flex-1 relative">
    <div class=" no-click "></div>
    <n-tabs type="line" animated justify-content="space-evenly" size="small">
      <n-tab-pane name="oasis">
        <template #tab>
          <div class="relative">
            最近项目
            <i class="i-icon-park-outline-down absolute -right-1.5em h-1.5em" />
          </div>
        </template>

        <n-tabs type="line" animated justify-content="space-evenly" size="small">
          <n-tab-pane name="oasis" tab="视频">
            <div class="flex p-x-1em">
              <div id="img-wrapper" class="flex gap-1em  w-62%" @click.stop="handleSelect">
                <div v-for="img in imgList" :key="img.id" class="check-wrapper w-50% overflow-hidden rounded"
                  :class="{ active: img.isSelected }">
                  <img :src="img.path" class="w-full rounded-md">
                  <div v-if="img.selectedOrder" class="selected-order">
                    {{ img.selectedOrder }}
                  </div>
                </div>
              </div>
            </div>
          </n-tab-pane>
          <n-tab-pane name="the beatles" tab="照片" />
          <n-tab-pane name="jay chou" tab="实况" />
        </n-tabs>
      </n-tab-pane>

      <n-tab-pane name="the beatles">
        <template #tab>
          <div class="relative">
            剪映云
            <i class="i-icon-park-outline-down absolute -right-1.5em h-1.5em" />
          </div>
        </template>
      </n-tab-pane>
      <n-tab-pane name="jay chou" tab="素材库" />
    </n-tabs>

    <div class="absolute bottom-0 w-full">
      <div v-if="selectedList.length" class="p-1em b-t-1 b-#262626 flex gap-1em">
        <div v-for="(img, index) in selectedList" :key="index" class="thumb-wrapper">
          <img :src="img.path" class="w-3em h-3em rounded-md">
          <div class="thumb-close" @click="handleSelect" />
        </div>
      </div>

      <div class="p-y-2em p-x-3em b-t-1 b-#262626 flex justify-end gap-1em">
        <n-button type="info" size="small">
          分屏排版
        </n-button>
        <n-button id="add" type="primary" size="small" @click.stop="handleAdd">
          添加
          <span v-if="selectedTotal">({{ selectedTotal }})</span>
        </n-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.no-click {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  z-index: 99;
}
.check-wrapper {
  position: relative;

  &.active::before {
    position: absolute;
    inset: 0;
    content: '';
    background-color: #E7415733;
  }

  .selected-order {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    color: white;
    background-color: #E74157;
    border-radius: 50%;
  }
}

.thumb-wrapper {
  position: relative;

  .thumb-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-image: url("@/assets/common/thumb_close.png");
    background-size: cover;
    transform: translate(50%, -50%);

  }
}
</style>
